<template>
	<view>
		<test :msg="msg" @testShowName="testEvent"></test>
		<view v-show="false">v-show</view>
		<view v-if="false">v-if</view>
		<view>xxx</view>
		<swiper class="swiper" indicator-dots autoplay interval="2000" duration="500" @change="test">
			<swiper-item>
				<image style="width: 100%;" src="https://tse1-mm.cn.bing.net/th/id/R-C.cfc273bfdf9dee6e33f41eaa4f549b21?rik=WMtTP0wFeo%2bCUA&riu=http%3a%2f%2fimg2.woyaogexing.com%2f2017%2f11%2f30%2fa6e7f7f5b4f2a1db!400x400_big.jpg&ehk=Xh6TAOUf8g9lApq5h6qOJFjg53KcV1sx3CUV%2bYnHcio%3d&risl=&pid=ImgRaw" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image style="width: 100%;" src="https://www.keaidian.com/uploads/allimg/190702/02123421_5.jpeg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image style="width: 100%;" src="https://tse1-mm.cn.bing.net/th/id/R-C.4459915d83672508b373dc0ad65ffe22?rik=%2fh0%2bPFJE0k2gHw&riu=http%3a%2f%2ffile.qqtouxiang.com%2fnvsheng%2f2020-02-13%2f5885422d764fcc06d9d6157d08dfc88e.jpeg&ehk=%2b%2bodGGVWI8nntD9bHnKc26%2bCgr5GC8UD%2fkJ5TNXhwfo%3d&risl=&pid=ImgRaw" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<scroll-view scroll-x style="white-space: nowrap;">
			<view id="demo1" style="display:inline-block;width:200px;height:100px;background:red;">A</view>
			<view id="demo2" style="display:inline-block;width:200px;height:100px;background:yellow;">B</view>
			<view id="demo3" style="display:inline-block;width:200px;height:100px;background:blue;">C</view>
		</scroll-view>
		<view class="id">
			<view class="left">
				<view v-for="(item, index) in list" :key="index" @click="clickId = 'po' + index">
					{{item.title}}
				</view>
			</view>
			<view class="right">
				<scroll-view scroll-y="true" style="height: 200px;" :scroll-into-view="clickId">
					<view v-for="(item, index) in list" :key="index">
						<view class="title" :id="'po' + index">
							{{item.title}}
						</view>
						<view v-for="(listItems, listIndex) in item.list" :key="listIndex">
							{{listItems}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import test from "../../components/test/test.vue"
	export default {
		data() {
			return {
				msg: 'Msea',
				list: [
					{
						title: "中餐",
						list: ["盖饭", "扒饭", "咖喱饭", "鸡排饭"]
					},
					{
						title: "西餐",
						list: ["牛排", "意面", "芝士", "汉堡"]
					},
					{
						title: "法餐",
						list: ["辣子鸡丁", "xxx", "可乐", "雪碧"]
					},
					{
						title: "快餐",
						list: ["薯条", "软子", "大米粥", "饮水"]
					},
				],
				clickId: ""
			};
		},
		components:{
			test
		},
		methods: {
			testEvent(rel){
				console.log(rel)
			},
			test(e){
				console.log(e.detail.current)
			}
		},
		onLoad() {
			console.log("页面初始化-执行一次")
		},
		onReady() {
			console.log("页面加载完毕-执行一次")
		},
		onShow() {
			console.log("页面进入执行-执行多次")
		},
		onHide() {
			console.log("页面离开-执行多次")
		},
		onPullDownRefresh(){
			console.log("用户执行了下拉")
		},
		onTabItemTap(){
			console.log("用户点击了导航")
		},
		onShareAppMessage(){
			console.log("用户点击了分享")
			return {
				title: "我是这条该最靓的仔",// 标题
				path: "pages/news/news", // 转发的路径
				imageUrl: "https://tse1-mm.cn.bing.net/th/id/R-C.583e2458c88a95bbe9eb1aa33b78d6f1?rik=oE3oUc8dUCYlFA&riu=http%3a%2f%2ffile.qqtouxiang.com%2fnvsheng%2f2019-08-26%2f1b5a8611c58b6075796cb57a15b45b75.jpg&ehk=VURVFfIKSTHpXfwS0LZDheMx4iFgVS%2bpSdOnhDzb8cI%3d&risl=&pid=ImgRaw"// 图片
			}
		}
		
	}
</script>

<style>
.id{
	display: flex;
}
.left{
	width: 100px;
	border: 1px solid red;
}
.right{
	flex: 1;
}
.title{
	font-size: 20px;
	font-weight: bold;
	background: pink;
}
</style>
